<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>探索世界 - 您的旅行指南</title>
    <!--引入的vue.js-->
    <script src="/js/vue.js"></script>
    <!--引入elementUI的css-->
    <link  type="text/css" rel="stylesheet" href="/css/index.css">
    <!--引入elementUI的js-->
    <script src="/js/index.js"></script>
    <!--引入axios.js-->
    <script src="/js/axios.min.js"></script>
    <style>
        /* 基础样式设置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Helvetica Neue', Arial, sans-serif;
        }

        html, body {
            height: 100%;
        }

        body {
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        ul {
            list-style: none;
        }

        main {
            flex: 1 0 auto;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background-color: #45a049;
        }

        .section-title {
            text-align: center;
            margin-bottom: 30px;
            font-size: 28px;
            color: #2c3e50;
            position: relative;
            padding-bottom: 15px;
        }

        .section-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background-color: #4CAF50;
        }

        /* 头部样式 */
        header {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #4CAF50;
        }

        .logo span {
            color: #2c3e50;
        }

        nav ul {
            display: flex;
        }

        nav ul li {
            margin-left: 20px;
        }

        nav ul li a {
            padding: 5px 10px;
            transition: color 0.3s;
        }

        nav ul li a:hover {
            color: #4CAF50;
        }

        .auth-buttons {
            display: flex;
            gap: 10px;
        }

        .auth-buttons .btn {
            padding: 8px 15px;
        }

        .btn-login {
            background-color: transparent;
            color: #4CAF50;
            border: 1px solid #4CAF50;
        }

        .btn-login:hover {
            background-color: #4CAF50;
            color: white;
        }

        /* 轮播图样式 */
        .carousel-container {
            position: relative;
            width: 100%;
            height: 500px;
            overflow: hidden;
        }

        .carousel-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .carousel-slide.active {
            opacity: 1;
        }

        .carousel-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .carousel-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            pointer-events: none;
        }
        .carousel-overlay * {
            pointer-events: auto;
        }

        .carousel-content {
            text-align: center;
            max-width: 800px;
            padding: 0 20px;
        }

        .carousel-content h1 {
            font-size: 36px;
            margin-bottom: 20px;
        }

        .carousel-content p {
            font-size: 18px;
            margin-bottom: 30px;
        }

        .carousel-indicators {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }

        .indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .indicator.active {
            background-color: white;
        }

        .search-box {
            display: flex;
            max-width: 600px;
            margin: 0 auto;
        }

        .search-box input {
            flex: 1;
            padding: 15px;
            border: none;
            border-radius: 4px 0 0 4px;
            font-size: 16px;
        }

        .search-box button {
            padding: 15px 25px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }

        /* 全局搜索框样式 */
        .global-search-container {
            padding: 20px 0;
        }

        /* 热门景区样式 */
        .popular-attractions {
            padding: 60px 0;
        }

        .attraction-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
        }

        .attraction-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }

        .attraction-card:hover {
            transform: translateY(-5px);
        }

        .attraction-img {
            height: 200px;
            overflow: hidden;
        }

        .attraction-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .attraction-card:hover .attraction-img img {
            transform: scale(1.05);
        }

        .attraction-info {
            padding: 20px;
        }

        .attraction-info h3 {
            margin-bottom: 10px;
            font-size: 18px;
        }

        .attraction-info p {
            color: #666;
            margin-bottom: 15px;
            font-size: 14px;
        }

        .attraction-price {
            color: #e74c3c;
            font-weight: bold;
            margin-bottom: 15px;
        }

        /* 景点推荐样式 */
        .spots-recommendation {
            padding: 60px 0;
            background-color: #f1f8e9;
        }

        .spots-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }

        .spot-item {
            position: relative;
            height: 200px;
            border-radius: 8px;
            overflow: hidden;
        }

        .spot-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .spot-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
            padding: 20px;
            color: white;
        }

        .spot-overlay h3 {
            margin-bottom: 5px;
        }

        /* 旅游攻略样式 */
        .travel-guides {
            padding: 60px 0;
        }

        .guides-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
        }

        .guide-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
            cursor: pointer;
        }

        .guide-card:hover {
            transform: translateY(-5px);
        }

        .guide-img {
            height: 180px;
            overflow: hidden;
        }

        .guide-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .guide-card:hover .guide-img img {
            transform: scale(1.05);
        }

        .guide-content {
            padding: 20px;
        }

        .guide-content h3 {
            margin-bottom: 10px;
        }

        .guide-meta {
            display: flex;
            justify-content: space-between;
            color: #888;
            font-size: 14px;
            margin-bottom: 15px;
        }

        .guide-destination {
            margin-bottom: 10px;
            color: #4CAF50;
            font-weight: bold;
        }

        .guide-stats {
            display: flex;
            justify-content: space-between;
            color: #888;
            font-size: 14px;
            margin-bottom: 15px;
        }

        .guide-excerpt {
            color: #666;
            margin-bottom: 15px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* 游记分享样式 */
        .travel-diaries {
            padding: 60px 0;
            background-color: #f1f8e9;
        }

        .diaries-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
        }

        .diary-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
            cursor: pointer;
        }

        .diary-card:hover {
            transform: translateY(-5px);
        }

        .diary-header {
            padding: 15px 20px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #eee;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 10px;
        }

        .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .diary-content {
            padding: 20px;
        }

        .diary-content h3 {
            margin-bottom: 10px;
        }

        .note-location {
            margin-bottom: 10px;
            color: #4CAF50;
            font-weight: bold;
        }

        .diary-content p {
            color: #666;
            margin-bottom: 15px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .diary-stats {
            display: flex;
            gap: 15px;
            color: #888;
            font-size: 14px;
        }

        /* 游记封面图片样式 */
        .diary-cover {
            height: 150px;
            overflow: hidden;
            border-radius: 6px;
            margin: 10px 0;
        }

        .diary-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 应用下载区域样式 */
        .app-download {
            padding: 60px 0;
            text-align: center;
            background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://source.unsplash.com/1600x900/?travel') no-repeat center center/cover;
            color: white;
        }

        .app-download h2 {
            margin-bottom: 20px;
        }

        .app-download p {
            max-width: 600px;
            margin: 0 auto 30px;
        }

        .download-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        .download-btn {
            display: flex;
            align-items: center;
            background-color: white;
            color: #333;
            padding: 10px 20px;
            border-radius: 5px;
            font-weight: bold;
        }

        .download-btn i {
            font-size: 24px;
            margin-right: 10px;
        }

        /* 页脚样式 */
        footer {
            background-color: #2c3e50;
            color: white;
            padding: 60px 0 20px;
            flex-shrink: 0;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }

        .footer-column h3 {
            margin-bottom: 20px;
            font-size: 18px;
        }

        .footer-column ul li {
            margin-bottom: 10px;
        }

        .footer-column ul li a:hover {
            color: #4CAF50;
        }

        .social-icons {
            display: flex;
            gap: 15px;
            margin-top: 15px;
        }

        .social-icons a {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            transition: background-color 0.3s;
        }

        .social-icons a:hover {
            background-color: #4CAF50;
        }

        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 14px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
            }

            nav ul {
                margin: 15px 0;
            }

            .search-section h1 {
                font-size: 28px;
            }

            .search-section p {
                font-size: 16px;
            }

            .download-buttons {
                flex-direction: column;
                align-items: center;
            }
        }

        /* 星级评分样式 */
        .el-rate {
            display: inline-block;
            vertical-align: middle;
        }

        .scenic-level {
            margin-bottom: 10px;
        }
        /* 统一搜索区域样式式 */
        .hero-section {
            position: relative;
            height: 700px;
        }

        .global-search-container {
            position: absolute;
            bottom: 500px; /* 调整位置 */
            left: 0;
            width:105%;
            display: flex;
            justify-content: center;
            z-index: 200;
        }

        .global-search-container .search-box {
            max-width: 600px;
            width: 100%;
            margin: 0 20px;
        }
        /* 加载状态样式 */
        .loading-spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #4CAF50;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 2s linear infinite;
            margin: 0 auto 15px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .loading {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #f8f9fa;
            color: #6c757d;
            height: 200px;
        }

        .error {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #f8f9fa;
            color: #dc3545;
            height: 200px;
        }

        .error i {
            font-size: 40px;
            margin-bottom: 15px;
        }
        .image-placeholder {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            background-color: #f5f5f5;
            color: #999;
        }

        .image-placeholder i {
            font-size: 40px;
            margin-bottom: 10px;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<main>
<!-- 头部导航 -->
<header>
    <div class="container header-container">
        <div class="logo">
            <a href="search.html">探索<span>世界</span></a>
        </div>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="scenic.html">景区</a></li>
                <li><a href="dot.html">景点</a></li>
                <li><a href="order.html">订单</a></li>
                <li><a href="guide.html">攻略</a></li>
                <li><a href="notes.html">游记</a></li>
            </ul>
        </nav>
        <div class="auth-buttons" id="authButtons">
            <!-- 登录状态由JavaScript动态生成 -->
        </div>
    </div>
</header>

<!-- 轮播图搜索区域 -->
<section class="carousel-container">
    <div class="carousel-slide active">
        <img src="/img/carousel/1.jpg" alt="轮播图1">
    </div>
    <div class="carousel-slide active">
        <img src="/img/carousel/2.jpg" alt="轮播图2">
    </div>
    <div class="carousel-slide active">
        <img src="/img/carousel/3.jpg" alt="轮播图3">
    </div>
    <div class="carousel-indicators">
        <div class="indicator active" data-slide="0"></div>
        <div class="indicator" data-slide="1"></div>
        <div class="indicator" data-slide="2"></div>
    </div>
</section>
    <!-- 统一的搜索框，放在轮播图外部 -->
    <div class="global-search-container">
        <div class="search-box">
            <input type="text" class="global-search-input" placeholder="搜索目的地、景点或攻略...">
            <button class="global-search-button"><i class="fas fa-search"></i> 搜索</button>
        </div>
    </div>
    </section>
<!-- 热门景区 -->
<section class="popular-attractions">
    <div class="container">
        <h2 class="section-title">热门景区</h2>
        <div class="attraction-cards">
            <!-- Vue.js 渲染的热门景区卡片 -->
            <div v-for="scenic in topScenics" :key="scenic.scenicId" class="attraction-card">
                <div class="attraction-img">
                    <img :src="scenic.scover || 'https://source.unsplash.com/800x600/?mountain'" :alt="scenic.scenicName">
                </div>
                <div class="attraction-info">
                    <h3>{{ scenic.scenicName }}</h3>
                    <p>{{ scenic.sintroduction ? scenic.sintroduction.substring(0, 30) + '...' : '暂无介绍' }}</p>
                    <div class="scenic-level">
                        <el-rate
                                v-model="scenic.level"
                                disabled
                                :max="5"
                                :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
                        </el-rate>
                        <span style="margin-left: 10px;">{{ scenic.jbcode }}景区</span>
                    </div>
                    <div class="attraction-price">地址: {{ scenic.saddress }}</div>
                    <a @click="viewScenicDetail(scenic.scenicId)" class="btn">查看详情</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 景点推荐 -->
<section class="spots-recommendation">
    <div class="container">
        <h2 class="section-title">精选景点</h2>
        <div class="spots-container" id="featured-spots-container">
            <div v-for="spot in featuredSpots" :key="spot.dotId" class="spot-item" @click="viewSpotDetail(spot.dotId)">
                <img :src="getImageUrl(spot.dcover || spot.dotPic)" :alt="spot.dotName" @error="handleImageError">
                <div class="spot-overlay">
                    <h3>{{ spot.dotName }}</h3>
                    <p>{{ spot.type }}</p>
                </div>
            </div>

            <!-- 加载状态 -->
            <div v-if="loading" class="spot-item loading">
                <div class="loading-spinner"></div>
                <p>加载中...</p>
            </div>

            <!-- 错误状态 -->
            <div v-if="error" class="spot-item error">
                <i class="fas fa-exclamation-triangle"></i>
                <p>加载失败</p>
            </div>
        </div>
    </div>
</section>

<!-- 旅游攻略 -->
<section class="travel-guides">
    <div class="container">
        <h2 class="section-title">旅游攻略</h2>
        <div class="guides-container" id="featured-guides-container">
            <div v-for="guide in featuredGuides" :key="guide.guideId" class="guide-card" @click="viewGuideDetail(guide.guideId)">
                <div class="guide-img">
                    <img :src="getGuideImage(guide)" :alt="guide.title" @error="handleGuideImageError":data-guide-id="guide.guideId">
                </div>
                <div class="guide-content">
                    <h3>{{ guide.title }}</h3>
                    <div class="guide-meta">
                        <span>作者:{{ guide.visitorsName || '用户' + guide.visitorId }}</span>
                        <span>{{ formatDate(guide.updateTime) }}</span>
                    </div>
                    <div class="guide-destination">
                        <i class="fas fa-map-marker-alt"></i> {{ guide.destination || '未知目的地' }}
                    </div>
                    <div class="guide-stats">
                        <span><i class="far fa-eye"></i> {{ guide.viewCount }} 浏览</span>
                        <span><i class="far fa-heart"></i> {{ guide.likeCount }} 点赞</span>
                        <span><i class="far fa-clock"></i> {{ guide.days }} 天</span>
                    </div>
                    <p class="guide-excerpt">{{ guide.content ? guide.content.substring(0, 100) + '...' : '暂无内容介绍' }}</p>
                </div>
            </div>

            <!-- 加载状态 -->
            <div v-if="guidesLoading" class="guide-card loading">
                <div class="loading-spinner"></div>
                <p>加载中...</p>
            </div>

            <!-- 错误状态 -->
            <div v-if="guidesError" class="guide-card error">
                <i class="fas fa-exclamation-triangle"></i>
                <p>加载失败</p>
            </div>
        </div>
    </div>
</section>

<!-- 游记分享 -->
<section class="travel-diaries">
    <div class="container">
        <h2 class="section-title">游记分享</h2>
        <div class="diaries-container" id="featured-notes-container">
            <div v-for="note in featuredNotes" :key="note.noteId" class="diary-card" @click="viewNoteDetail(note.noteId)">
                <div class="diary-header">
                    <div class="user-avatar">
                        <img :src="getUserAvatar(note)" :alt="note.visitorsName" @error="handleAvatarError">
                    </div>
                    <div>
                        <h4>{{ note.visitorsName || '用户' + note.visitorId }}</h4>
                    </div>
                </div>
                <div class="diary-content">
                    <h3>{{ note.title }}</h3>
                    <div class="note-location">
                        <i class="fas fa-map-marker-alt"></i> {{ note.location || '未知地点' }}
                    </div>
                    <!-- 游记封面图片 -->
                    <div class="diary-cover">
                        <img :src="getNoteImage(note)" :alt="note.title" @error="handleNoteImageError" :data-note-id="note.noteId">
                    </div>
                    <p>{{ note.content ? note.content.substring(0, 100) + '...' : '暂无内容介绍' }}</p>
                    <div class="diary-stats">
                        <span><i class="far fa-eye"></i> {{ note.viewCount || 0 }} 浏览</span>
                        <span><i class="far fa-heart"></i> {{ note.likeCount || 0 }} 点赞</span>
                        <span><i class="far fa-comment"></i> {{ note.commentCount || 0 }} 评论</span>
                    </div>
                </div>
            </div>

            <!-- 加载状态 -->
            <div v-if="notesLoading" class="diary-card loading">
                <div class="loading-spinner"></div>
                <p>加载中...</p>
            </div>

            <!-- 错误状态 -->
            <div v-if="notesError" class="diary-card error">
                <i class="fas fa-exclamation-triangle"></i>
                <p>加载失败</p>
            </div>
        </div>
    </div>
</section>

<!-- 应用下载 -->
<section class="app-download">
    <div class="container">
        <h2>下载我们的应用程序</h2>
        <p>随时随地发现旅行灵感，预订门票酒店，查看最新攻略，记录和分享您的旅行经历</p>
        <div class="download-buttons">
            <a href="#" class="download-btn">
                <i class="fab fa-apple"></i>
                <div>
                    <span>下载自</span>
                    <h4>App Store</h4>
                </div>
            </a>
            <a href="#" class="download-btn">
                <i class="fab fa-google-play"></i>
                <div>
                    <span>下载自</span>
                    <h4>Google Play</h4>
                </div>
            </a>
        </div>
    </div>
</section>

</main>
<!-- 页脚 -->
<footer>
    <div class="container">
        <div class="footer-content">
            <div class="footer-column">
                <h3>关于我们</h3>
                <ul>
                    <li><a href="#">公司简介</a></li>
                    <li><a href="#">团队介绍</a></li>
                    <li><a href="#">企业文化</a></li>
                    <li><a href="#">加入我们</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>帮助中心</h3>
                <ul>
                    <li><a href="#">使用指南</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">服务条款</a></li>
                    <li><a href="#">隐私政策</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>合作伙伴</h3>
                <ul>
                    <li><a href="#">景区合作</a></li>
                    <li><a href="#">酒店合作</a></li>
                    <li><a href="#">旅行社合作</a></li>
                    <li><a href="#">广告投放</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>联系我们</h3>
                <ul>
                    <li><i class="fas fa-phone"></i> 400-123-4567</li>
                    <li><i class="fas fa-envelope"></i> info@exploreworld.com</li>
                    <li><i class="fas fa-map-marker-alt"></i> 北京市朝阳区某某大厦</li>
                </ul>
                <div class="social-icons">
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-qq"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
        </div>
        <div class="copyright">
            <p>© 2023 探索世界旅游网 版权所有</p>
        </div>
    </div>
</footer>

<!-- 引入Vue和Element UI -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.14/lib/index.js"></script>

<!-- 引入axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    // 轮播图功能
    document.addEventListener('DOMContentLoaded', function() {
        const slides = document.querySelectorAll('.carousel-slide');
        const indicators = document.querySelectorAll('.indicator');
        let currentSlide = 0;
        const slideCount = slides.length;

        // 自动播放功能
        function nextSlide() {
            // 隐藏当前幻灯片
            slides[currentSlide].classList.remove('active');
            indicators[currentSlide].classList.remove('active');

            // 计算下一个幻灯片索引
            currentSlide = (currentSlide + 1) % slideCount;

            // 显示下一个幻灯片
            slides[currentSlide].classList.add('active');
            indicators[currentSlide].classList.add('active');
        }

        // 手动切换功能
        function goToSlide(slideIndex) {
            // 隐藏当前幻灯片
            slides[currentSlide].classList.remove('active');
            indicators[currentSlide].classList.remove('active');

            // 更新当前幻灯片索引
            currentSlide = slideIndex;

            // 显示目标幻灯片
            slides[currentSlide].classList.add('active');
            indicators[currentSlide].classList.add('active');
        }

        // 为指示器添加点击事件
        indicators.forEach(indicator => {
            indicator.addEventListener('click', function() {
                const slideIndex = parseInt(this.getAttribute('data-slide'));
                goToSlide(slideIndex);
            });
        });

        // 启动自动播放（每5秒切换一次）
        setInterval(nextSlide, 5000);

        // 搜索功能
        function performSearch(keyword) {
            if (!keyword.trim()) {
                alert('请输入搜索关键词');
                return;
            }
            
            // 跳转到搜索结果页面，这里我们创建一个统一的搜索页面
            window.location.href = 'search.html?keyword=' + encodeURIComponent(keyword);
        }

        // 为所有搜索框和按钮添加事件监听器
        document.querySelectorAll('.carousel-search-button').forEach(button => {
            button.addEventListener('click', function() {
                const keyword = this.previousElementSibling.value;
                performSearch(keyword);
            });
        });

        // 添加回车键搜索支持
        document.querySelectorAll('.carousel-search-input').forEach(input => {
            input.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    performSearch(this.value);
                }
            });
        });

        // 为全局搜索框添加事件监听器
        const globalSearchInput = document.querySelector('.global-search-input');
        const globalSearchButton = document.querySelector('.global-search-button');
        
        if (globalSearchButton) {
            globalSearchButton.addEventListener('click', function() {
                const keyword = globalSearchInput.value;
                performSearch(keyword);
            });
        }
        
        if (globalSearchInput) {
            globalSearchInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    performSearch(this.value);
                }
            });
        }

        // 更新导航栏登录状态
        updateAuthButtons();
        // 搜索框获得焦点时扩大
        const searchInputs = document.querySelectorAll('.search-box input');
        searchInputs.forEach(searchInput => {
            searchInput.addEventListener('focus', function() {
                this.parentElement.style.transform = 'scale(1.05)';
                this.parentElement.style.transition = 'transform 0.3s';
            });

            searchInput.addEventListener('blur', function() {
                this.parentElement.style.transform = 'scale(1)';
            });
        });

        // 卡片悬停效果
        const cards = document.querySelectorAll('.attraction-card, .guide-card, .diary-card');
        cards.forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.boxShadow = '0 8px 16px rgba(0, 0, 0, 0.2)';
            });

            card.addEventListener('mouseleave', function() {
                this.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
            });
        });
    });
    // 检查登录状态并更新导航栏
    function updateAuthButtons() {
        const authButtons = document.getElementById('authButtons');
        const cid = localStorage.getItem('cid');
        const userInfoStr = localStorage.getItem('userInfo');

        if (cid && userInfoStr) {
            // 用户已登录，显示个人中心和退出登录
            try {
                const userInfo = JSON.parse(userInfoStr);
                authButtons.innerHTML = `
                <span style="margin-right: 15px; color: #4CAF50;">欢迎，${userInfo.visitorsName || userInfo.realName || '用户'}</span>
                <a href="profile.html" class="btn">个人中心</a>
                <a href="#" class="btn btn-login" onclick="logout()">退出登录</a>
            `;
            } catch (e) {
                // 解析用户信息失败，显示默认登录状态
                authButtons.innerHTML = `
                <a href="login.html" class="btn btn-login">登录</a>
                <a href="register.html" class="btn">注册</a>
            `;
            }
        } else {
            // 用户未登录，显示登录注册按钮
            authButtons.innerHTML = `
            <a href="login.html" class="btn btn-login">登录</a>
            <a href="register.html" class="btn">注册</a>
        `;
        }
    }

    // 通用的退出登录函数（用于导航栏）
    function logout() {
        if (confirm('确定要退出登录吗？')) {
            // 清除本地存储的用户信息
            localStorage.removeItem('cid');
            localStorage.removeItem('userInfo');
            localStorage.removeItem('token');

            // 更新导航栏显示
            updateAuthButtons();

            // 延迟跳转到首页
            setTimeout(() => {
                window.location.href = 'index.html';
            }, 500);
        }
        return false; // 阻止链接默认行为
    }

    // Vue实例，用于管理热门景区数据
    new Vue({
        el: '.popular-attractions',
        data: {
            scenics: [],
            topScenics: []
        },
        mounted() {
            this.fetchScenicList();
        },
        methods: {
            // 获取景区列表数据
            fetchScenicList() {
                axios.get('/scenic/frontQueryAll')
                // 设置超时时间
                const source = axios.CancelToken.source();
                const timeout = setTimeout(() => {
                    source.cancel('请求超时');
                    this.useFallbackData();
                }, 10000); // 10秒超时

                axios.get('/scenic/frontQueryAll', {
                    cancelToken: source.token
                })
                    .then(response => {
                        clearTimeout(timeout); // 清除超时
                        if (response.data.code === 200) {
                            this.scenics = response.data.data;
                            // 根据推荐度(weight)排序，取前6个景区
                            this.topScenics = this.scenics
                                .sort((a, b) => (b.weight || 0) - (a.weight || 0))
                                .slice(0, 6);
                        } else {
                            console.error('获取景区列表失败:', response.data.msg);
                            // 使用默认数据作为后备
                            this.useFallbackData();
                        }
                    })
                    .catch(error => {
                        clearTimeout(timeout); // 清除超时
                        console.error('请求失败:', error.message);
                        // 使用默认数据作为后备
                        this.useFallbackData();
                    });
            },
            // 后备数据，当API请求失败时使用
            useFallbackData() {
                this.topScenics = [
                    {
                        scenicId: 1,
                        scenicName: "山水风景区",
                        sintroduction: "壮丽的自然风光，适合徒步和摄影",
                        saddress: "某省某市某区",
                        level: 4.5,
                        jbcode: "5A",
                        scover: "https://source.unsplash.com/800x600/?mountain"
                    },
                    {
                        scenicId: 2,
                        scenicName: "阳光海滩",
                        sintroduction: "金色沙滩和清澈海水，度假首选",
                        saddress: "某省某市某区",
                        level: 4.2,
                        jbcode: "4A",
                        scover: "https://source.unsplash.com/800x600/?beach"
                    },
                    {
                        scenicId: 3,
                        scenicName: "古城文化区",
                        sintroduction: "千年古迹，感受历史文化的魅力",
                        saddress: "某省某市某区",
                        level: 4.8,
                        jbcode: "5A",
                        scover: "https://source.unsplash.com/800x600/?historical"
                    },
                    {
                        scenicId: 4,
                        scenicName: "国家森林公园",
                        sintroduction: "原始森林生态，天然氧吧",
                        saddress: "某省某市某区",
                        level: 4.3,
                        jbcode: "4A",
                        scover: "https://source.unsplash.com/800x600/?park"
                    },
                    {
                        scenicId: 5,
                        scenicName: "湖泊风景区",
                        sintroduction: "湖光山色，美不胜收",
                        saddress: "某省某市某区",
                        level: 4.6,
                        jbcode: "5A",
                        scover: "https://source.unsplash.com/800x600/?lake"
                    },
                    {
                        scenicId: 6,
                        scenicName: "温泉度假村",
                        sintroduction: "天然温泉，放松身心",
                        saddress: "某省某市某区",
                        level: 4.4,
                        jbcode: "4A",
                        scover: "https://source.unsplash.com/800x600/?spa"
                    }
                ];
            },
            // 查看景区详情
            viewScenicDetail(scenicId) {
                window.location.href = 'scenic.html?scenicId=' + scenicId;
            }
        }
    });

    // 精选景点Vue实例
    new Vue({
        el: '#featured-spots-container',
        data: {
            featuredSpots: [],
            loading: true,
            error: false
        },
        mounted() {
            this.fetchFeaturedSpots();
        },
        methods: {
            // 获取精选景点数据
            fetchFeaturedSpots() {
                // 检查是否有当天的缓存数据
                const today = new Date().toDateString();
                const cachedData = localStorage.getItem('featuredSpots');
                const cacheDate = localStorage.getItem('featuredSpotsDate');

                if (cachedData && cacheDate === today) {
                    // 修复：使用正确的变量名featuredSpots而不是featuredGuides
                    this.featuredSpots = JSON.parse(cachedData);
                    this.loading = false;
                    return;
                }

                // 设置超时时间
                const source = axios.CancelToken.source();
                const timeout = setTimeout(() => {
                    source.cancel('请求超时');
                    this.useFallbackData();
                }, 10000); // 10秒超时

                // 从API获取数据
                axios.post('/dot/frontQueryByPage', {
                    pageNo: 1,
                    pageSize: 100, // 获取足够多的数据用于随机选择
                    data: {}
                }, {
                    cancelToken: source.token
                })
                    .catch(error => {
                        console.error('获取景点数据失败:', error);
                        // 检查错误类型
                        if (error.response) {
                            console.error('服务器错误响应:', error.response.status, error.response.data);
                        } else if (error.request) {
                            console.error('网络请求无响应:', error.request);
                        } else {
                            console.error('请求配置错误:', error.message);
                        }
                        throw error; // 重新抛出错误以便外层捕获
                    })
                    .then(response => {
                        clearTimeout(timeout); // 清除超时
                        if (response.data.code === 200) {
                            const allSpots = response.data.data.list || [];

                            if (allSpots.length === 0) {
                                this.useFallbackData();
                                return;
                            }

                            // 随机选择3个景点
                            const randomSpots = this.selectRandomSpots(allSpots, 3);

                            // 处理数据格式
                            this.featuredSpots = randomSpots.map(spot => ({
                                ...spot,
                                dcover: spot.dotPic,
                                type: spot.type || "景点"
                            }));

                            // 缓存数据
                            localStorage.setItem('featuredSpots', JSON.stringify(this.featuredSpots));
                            localStorage.setItem('featuredSpotsDate', today);

                            this.loading = false;
                        } else {
                            this.useFallbackData();
                        }
                    })
                    .catch(error => {
                        clearTimeout(timeout); // 清除超时
                        console.error('获取景点数据失败:', error);
                        this.useFallbackData();
                    });
            },

            // 随机选择指定数量的景点
            selectRandomSpots(spots, count) {
                // 复制数组以避免修改原数组
                const shuffled = [...spots];

                // Fisher-Yates 洗牌算法
                for (let i = shuffled.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
                }

                // 返回前count个元素
                return shuffled.slice(0, count);
            },

            // 使用备用数据（当API不可用时）
            useFallbackData() {
                const fallbackSpots = [
                    {
                        dotId: 1,
                        dotName: "观景台",
                        type: "自然景观",
                        dcover: "https://source.unsplash.com/800x600/?viewpoint"
                    },
                    {
                        dotId: 2,
                        dotName: "古寺",
                        type: "人文古迹",
                        dcover: "https://source.unsplash.com/800x600/?temple"
                    },
                    {
                        dotId: 3,
                        dotName: "游乐园",
                        type: "娱乐设施",
                        dcover: "https://source.unsplash.com/800x600/?amusement"
                    }
                ];

                this.featuredSpots = this.selectRandomSpots(fallbackSpots, 3);
                this.loading = false;
            },

            // 处理图片URL
            getImageUrl(url) {
                if (!url) return '/images/default-guide.jpg'; // 使用本地默认图片
                if (url.startsWith('http')) return url;
                return url.startsWith('/') ? url : '/' + url;
            },

            // 图片加载错误处理
            handleImageError(event) {
                event.target.src = 'https://source.unsplash.com/800x600/?mountain'; // 使用网络默认图片
            },

            // 查看景点详情
            viewSpotDetail(dotId) {
                window.location.href = 'dot.html?dotId=' + dotId;
            }
        }
    });

    // 精选攻略Vue实例
    new Vue({
        el: '#featured-guides-container',
        data: {
            featuredGuides: [],
            guidesLoading: true,
            guidesError: false
        },
        mounted() {
            this.fetchFeaturedGuides();
        },
        methods: {
            // 获取精选攻略数据
            fetchFeaturedGuides() {
                // 检查是否有当天的缓存数据（应该首先检查）
                const today = new Date().toDateString();
                const cachedData = localStorage.getItem('featuredGuides');
                const cacheDate = localStorage.getItem('featuredGuidesDate');

                if (cachedData && cacheDate === today) {
                    // 使用缓存数据
                    this.featuredGuides = JSON.parse(cachedData);
                    this.guidesLoading = false;
                    return;
                }

                // 设置超时时间
                const source = axios.CancelToken.source();
                const timeout = setTimeout(() => {
                    source.cancel('请求超时');
                    this.useFallbackGuides();
                }, 10000); // 10秒超时

                // 从API获取数据
                axios.post('/guides/queryByPage', {
                    pageNo: 1,
                    pageSize: 100, // 获取足够多的数据用于随机选择
                    data: {}
                }, {
                    cancelToken: source.token
                })
                    .catch(error => {
                        console.error('获取攻略数据失败:', error);
                        // 检查错误类型
                        if (error.response) {
                            console.error('服务器错误响应:', error.response.status, error.response.data);
                        } else if (error.request) {
                            console.error('网络请求无响应:', error.request);
                        } else {
                            console.error('请求配置错误:', error.message);
                        }
                        throw error; // 重新抛出错误以便外层捕获
                    })
                    .then(response => {
                        clearTimeout(timeout); // 清除超时
                        if (response.data.code === 200) {
                            const allGuides = response.data.data.list || [];

                            if (allGuides.length === 0) {
                                this.useFallbackGuides();
                                return;
                            }

                            // 随机选择3个攻略
                            const randomGuides = this.selectRandomGuides(allGuides, 3);

                            // 处理数据格式
                            this.featuredGuides = randomGuides.map(guide => ({
                                ...guide,
                                updateTime: guide.updateTime || guide.createTime,
                                visitorsName: guide.visitorsName || '用户' + guide.visitorId,
                                viewCount: guide.viewCount || 0,
                                likeCount: guide.likeCount || 0,
                                days: guide.days || 3
                            }));

                            // 为每个攻略获取图片
                            const fetchImagesPromises = this.featuredGuides.map(guide =>
                                this.fetchGuideImages(guide)
                            );

                            Promise.all(fetchImagesPromises)
                                .then(() => {
                                    // 所有图片获取完成后缓存数据
                                    localStorage.setItem('featuredGuides', JSON.stringify(this.featuredGuides));
                                    localStorage.setItem('featuredGuidesDate', today);
                                    this.guidesLoading = false;
                                })
                                .catch(error => {
                                    console.error('获取攻略图片失败:', error);
                                    // 即使图片获取失败，也要显示攻略内容
                                    localStorage.setItem('featuredGuides', JSON.stringify(this.featuredGuides));
                                    localStorage.setItem('featuredGuidesDate', today);
                                    this.guidesLoading = false;
                                });
                        } else {
                            this.useFallbackGuides();
                        }
                    })
                    .catch(error => {
                        clearTimeout(timeout); // 清除超时
                        console.error('获取攻略数据失败:', error);
                        this.useFallbackGuides();
                    });
            },


            // 随机选择指定数量的攻略
            selectRandomGuides(guides, count) {
                // 复制数组以避免修改原数组
                const shuffled = [...guides];

                // Fisher-Yates 洗牌算法
                for (let i = shuffled.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
                }

                // 返回前count个元素
                return shuffled.slice(0, count);
            },

            // 使用备用数据（当API不可用时）
            useFallbackGuides() {
                const fallbackGuides = [
                    {
                        guideId: 1,
                        title: "三日游完美攻略",
                        destination: "北京",
                        content: "北京三日游攻略，包含故宫、长城等必去景点",
                        updateTime: new Date(),
                        visitorsName: "旅行达人",
                        viewCount: 1234,
                        likeCount: 89,
                        days: 3
                    },
                    {
                        guideId: 2,
                        title: "海岛度假指南",
                        destination: "三亚",
                        content: "三亚海岛度假全攻略，享受阳光沙滩",
                        updateTime: new Date(),
                        visitorsName: "海岛控",
                        viewCount: 987,
                        likeCount: 67,
                        days: 5
                    },
                    {
                        guideId: 3,
                        title: "古镇文化之旅",
                        destination: "丽江",
                        content: "丽江古镇深度游，感受纳西文化",
                        updateTime: new Date(),
                        visitorsName: "文化探索者",
                        viewCount: 765,
                        likeCount: 45,
                        days: 4
                    }
                ];

                this.featuredGuides = this.selectRandomGuides(fallbackGuides, 3);
                this.guidesLoading = false;
            },

            fetchGuideImages(guide) {
                return axios.post('/guideImages/queryByPage', {
                    pageNo: 1,
                    pageSize: 10,
                    data: { guideId: guide.guideId }
                })
                    .then(response => {
                        if (response.data.code === 200 && response.data.data && response.data.data.list) {
                            // 确保响应式更新
                            this.$set(guide, 'images', response.data.data.list);
                        } else {
                            this.$set(guide, 'images', []);
                        }
                    })
                    .catch(error => {
                        console.error('获取攻略图片失败:', guide.guideId, error);
                        this.$set(guide, 'images', []);
                    });
            },

            // 改进 getGuideImage 方法
            getGuideImage(guide) {
                // 确保 guide.images 存在且不为空
                if (guide.images && Array.isArray(guide.images) && guide.images.length > 0) {
                    const imageUrl = guide.images[0].imageUrl;
                    if (imageUrl) {
                        // 如果已经是完整URL，直接返回
                        if (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) {
                            return imageUrl;
                        }
                        // 处理相对路径 - 确保正确的路径格式
                        if (imageUrl.startsWith('/')) {
                            // 绝对路径
                            return imageUrl;
                        } else {
                            // 相对路径，添加正确的前缀
                            return '/img/guideImages/' + imageUrl;
                        }
                    }
                }
                // 返回默认图片
                return 'https://source.unsplash.com/800x600/?travel'; // 使用网络默认图片
            },
            // 改进 handleGuideImageError 方法
            handleGuideImageError(event) {
                // 防止无限循环，只尝试一次替换
                if (!event.target.dataset.errorHandled) {
                    event.target.dataset.errorHandled = 'true';
                    event.target.src = 'https://source.unsplash.com/800x600/?travel'; // 使用网络默认图片
                }
            },

            // 格式化日期
            formatDate(dateString) {
                if (!dateString) return '未知日期';
                const date = new Date(dateString);
                return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
            },

            // 查看攻略详情
            viewGuideDetail(guideId) {
                // 直接跳转到攻略详情页面而不是攻略列表页面
                window.location.href = 'guide.html?guideId=' + guideId;
            },
        }
    });

    // 精选游记Vue实例
    new Vue({
        el: '#featured-notes-container',
        data: {
            featuredNotes: [],
            notesLoading: true,
            notesError: false
        },
        mounted() {
            this.fetchFeaturedNotes();
        },
        methods: {
            // 获取精选游记数据
            fetchFeaturedNotes() {
                // 检查是否有当天的缓存数据
                const today = new Date().toDateString();
                const cachedData = localStorage.getItem('featuredNotes');
                const cacheDate = localStorage.getItem('featuredNotesDate');

                if (cachedData && cacheDate === today) {
                    // 使用缓存数据
                    this.featuredNotes = JSON.parse(cachedData);
                    this.notesLoading = false;
                    return;
                }

                // 设置超时时间
                const source = axios.CancelToken.source();
                const timeout = setTimeout(() => {
                    source.cancel('请求超时');
                    this.useFallbackNotes();
                }, 10000); // 10秒超时

                // 从API获取数据
                axios.post('/notes/queryByPage', {
                    pageNo: 1,
                    pageSize: 100, // 获取足够多数据用于随机选择
                    data: {}
                }, {
                    cancelToken: source.token
                })
                    .then(response => {
                        clearTimeout(timeout); // 清除超时
                        if (response.data.code === 200) {
                            const allNotes = response.data.data.list || [];

                            if (allNotes.length === 0) {
                                this.useFallbackNotes();
                                return;
                            }

                            // 随机选择3个游记
                            const randomNotes = this.selectRandomNotes(allNotes, 3);

                            // 处理数据格式
                            this.featuredNotes = randomNotes.map(note => ({
                                ...note,
                                visitorsName: note.visitorsName || '用户' + note.visitorId,
                                viewCount: note.viewCount || 0,
                                likeCount: note.likeCount || 0,
                                commentCount: note.commentCount || 0
                            }));

                            // 并行获取所有游记的图片
                            const imagePromises = this.featuredNotes.map(note =>
                                this.fetchNoteImages(note)
                            );

                            Promise.all(imagePromises)
                                .then(() => {
                                    localStorage.setItem('featuredNotes', JSON.stringify(this.featuredNotes));
                                    localStorage.setItem('featuredNotesDate', today);
                                    this.notesLoading = false;
                                })
                                .catch(error => {
                                    console.error('获取游记图片失败:', error);
                                    // 即使图片获取失败，也要显示游记内容
                                    localStorage.setItem('featuredNotes', JSON.stringify(this.featuredNotes));
                                    localStorage.setItem('featuredNotesDate', today);
                                    this.notesLoading = false;
                                });
                        } else {
                            this.useFallbackNotes();
                        }
                    })
                    .catch(error => {
                        clearTimeout(timeout); // 清除超时
                        console.error('获取游记数据失败:', error);
                        // 检查是否是网络错误或404错误
                        if (error.response) {
                            // 服务器返回了错误响应
                            console.error('服务器错误响应:', error.response.status, error.response.data);
                        } else if (error.request) {
                            // 请求已发出但没有收到响应
                            console.error('网络请求无响应:', error.request);
                        } else {
                            // 其他错误
                            console.error('请求配置错误:', error.message);
                        }
                        this.useFallbackNotes();
                    });
            },

            // 改进的获取游记图片方法
            fetchNoteImages(note) {
                return new Promise((resolve) => {
                    axios.post('/noteImages/queryByPage', {
                        pageNo: 1,
                        pageSize: 10,
                        data: { noteId: note.noteId }
                    })
                        .then(response => {
                            if (response.data.code === 200 && response.data.data && response.data.data.list) {
                                this.$set(note, 'images', response.data.data.list);
                            } else {
                                this.$set(note, 'images', []);
                            }
                            resolve();
                        })
                        .catch(error => {
                            console.error('获取游记图片失败:', note.noteId, error);
                            // 检查错误类型
                            if (error.response) {
                                console.error('服务器错误响应:', error.response.status, error.response.data);
                            } else if (error.request) {
                                console.error('网络请求无响应:', error.request);
                            } else {
                                console.error('请求配置错误:', error.message);
                            }
                            this.$set(note, 'images', []);
                            resolve();
                        });
                });
            },
            // 修复后的获取游记图片URL方法
            getNoteImage(note) {
                // 确保note存在
                if (!note) {
                    return this.getDefaultImage();
                }

                // 检查是否有图片数据
                if (note.images && Array.isArray(note.images) && note.images.length > 0) {
                    const imageUrl = note.images[0].imageUrl;

                    if (imageUrl) {
                        // 处理图片URL
                        if (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) {
                            return imageUrl; // 已经是完整URL
                        } else if (imageUrl.startsWith('/')) {
                            return window.location.origin + imageUrl; // 绝对路径加上域名
                        } else {
                            // 相对路径，添加完整的前缀
                            return window.location.origin + '/img/noteImages/' + imageUrl;
                        }
                    }
                }

                // 如果没有图片数据，尝试使用默认图片
                return 'https://source.unsplash.com/800x600/?journey'; // 使用网络默认图片
            },

            // 统一的默认图片获取方法
            getDefaultImage() {
                // 使用Unsplash的随机旅行图片作为默认
                return 'https://source.unsplash.com/800x600/?travel';
            },
            // 随机选择指定数量的游记
            selectRandomNotes(notes, count) {
                // 复制数组以避免修改原数组
                const shuffled = [...notes];

                // Fisher-Yates 洗牌算法
                for (let i = shuffled.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
                }

                // 返回前count个元素
                return shuffled.slice(0, count);
            },

            // 使用备用数据（当API不可用时）
            useFallbackNotes() {
                const fallbackNotes = [
                    {
                        noteId: 1,
                        title: "我的西藏之旅",
                        location: "西藏",
                        content: "西藏高原的神秘与壮美，一次心灵的洗礼",
                        visitorsName: "高原行者",
                        viewCount: 1567,
                        likeCount: 123,
                        commentCount: 45
                    },
                    {
                        noteId: 2,
                        title: "欧洲背包行",
                        location: "欧洲",
                        content: "三个月欧洲背包旅行，感受不同文化的魅力",
                        visitorsName: "背包客小张",
                        viewCount: 2345,
                        likeCount: 189,
                        commentCount: 67
                    },
                    {
                        noteId: 3,
                        title: "日本樱花季",
                        location: "日本",
                        content: "追逐樱花盛开的日子，日本春季旅行记录",
                        visitorsName: "樱花爱好者",
                        viewCount: 1789,
                        likeCount: 156,
                        commentCount: 52
                    }
                ];

                this.featuredNotes = this.selectRandomNotes(fallbackNotes, 3);
                this.notesLoading = false;
            },

            // 获取用户头像
            getUserAvatar(note) {
                if (note.avatar) {
                    // 如果头像URL是完整URL则直接返回
                    if (note.avatar.startsWith('http://') || note.avatar.startsWith('https://')) {
                        return note.avatar;
                    }
                    // 如果是相对路径，则添加域名前缀
                    else if (note.avatar.startsWith('/')) {
                        return window.location.origin + note.avatar;
                    }
                    // 其他情况添加默认前缀
                    else {
                        return window.location.origin + '/img/avatar/' + note.avatar;
                    }
                }
                // 默认头像
                return 'https://source.unsplash.com/100x100/?portrait';
            },

            // 改进的图片错误处理
            handleNoteImageError(event) {
                // 防止无限循环
                if (event.target.dataset.errorHandled) {
                    return;
                }

                event.target.dataset.errorHandled = 'true';

                // 使用默认图片
                event.target.src = 'https://source.unsplash.com/800x600/?journey';

                // 移除错误监听器，避免重复处理
                event.target.onerror = null;
            },

            // 查看游记详情
            viewNoteDetail(noteId) {
                // 跳转到游记详情页面而不是列表页面
                window.location.href = 'notes.html?noteId=' + noteId;
            },

            // 头像错误处理
            handleAvatarError(event) {
                // 防止无限循环
                if (event.target.dataset.errorHandled) {
                    return;
                }

                event.target.dataset.errorHandled = 'true';

                // 检查当前图片是否已经是默认图片
                if (event.target.src !== 'https://source.unsplash.com/100x100/?portrait') {
                    event.target.src = 'https://source.unsplash.com/100x100/?portrait';
                } else {
                    // 如果默认图片也加载失败，则使用base64占位图
                    event.target.src = '';
                }
            },

        }
    });
</script>
</body>
</html>